﻿
@{
    ViewBag.Title = "LoadingButtons";
}

<div class="row wrapper border-bottom white-bg page-heading">
    <div class="col-lg-10">
        <h2>Loading buttons</h2>
        <ol class="breadcrumb">
            <li>
                <a href="index.html">Home</a>
            </li>
            <li>
                <a>Miscellaneous</a>
            </li>
            <li class="active">
                <strong>Loading buttons</strong>
            </li>
        </ol>
    </div>
    <div class="col-lg-2">

    </div>
</div>

<div class="wrapper wrapper-content  animated fadeInRight">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox ">
                <div class="ibox-title">
                    <h5>Loading buttons - Ladda</h5>
                </div>

                <div class="ibox-content">

                    <strong>Ladda</strong>
                    <p>
                        A UI concept which merges loading indicators into the action that invoked them. Primarily intended for use with forms where it gives users immediate feedback upon submit rather than leaving them wondering while the browser does its thing.
                    </p>

                    <div class="row">
                        <div class="col-sm-3">
                            <h4>expand-left</h4>
                            <button class="ladda-button btn btn-primary" data-style="expand-left">Submit</button>
                        </div>
                        <div class="col-sm-3">
                            <h4>expand-right</h4>
                            <button class="ladda-button btn btn-primary" data-style="expand-right">Submit</button>
                        </div>
                        <div class="col-sm-3">
                            <h4>expand-up</h4>
                            <button class="ladda-button btn btn-primary" data-style="expand-up">Submit</button>
                        </div>
                        <div class="col-sm-3">
                            <h4>expand-down</h4>
                            <button class="ladda-button btn btn-primary" data-style="expand-down">Submit</button>
                        </div>
                    </div>
                    <div class="row m-t-md">
                        <div class="col-sm-3">
                            <h4>contract</h4>
                            <button class="ladda-button btn btn-warning" data-style="contract">Submit</button>
                        </div>
                        <div class="col-sm-3">
                            <h4>zoom-in</h4>
                            <button class="ladda-button btn btn-warning" data-style="zoom-in">Submit</button>
                        </div>
                        <div class="col-sm-3">
                            <h4>zoom-out</h4>
                            <button class="ladda-button btn btn-warning" data-style="zoom-out">Submit</button>
                        </div>
                    </div>
                    <div class="row m-t-md">
                        <div class="col-sm-3">
                            <h4>slide-left</h4>
                            <button class="ladda-button  btn btn-info" data-style="slide-left">Submit</button>
                        </div>
                        <div class="col-sm-3">
                            <h4>slide-right</h4>
                            <button class="ladda-button btn btn-info" data-style="slide-right">Submit</button>
                        </div>
                        <div class="col-sm-3">
                            <h4>slide-up</h4>
                            <button class="ladda-button btn btn-info" data-style="slide-up">Submit</button>
                        </div>
                        <div class="col-sm-3">
                            <h4>slide-down</h4>
                            <button class="ladda-button btn btn-info" data-style="slide-down">Submit</button>
                        </div>
                    </div>
                    <div class="row m-t-lg">
                        <div class="col-sm-3">
                            <section class="progress-demo">
                                <h4>expand-right</h4>
                                <button class="ladda-button btn btn-danger" data-style="expand-right">Submit</button>
                            </section>
                        </div>
                        <div class="col-sm-3">
                            <section class="progress-demo">
                                <h4>contract</h4>
                                <button class="ladda-button btn btn-danger" data-style="contract">Submit</button>
                            </section>
                        </div>
                    </div>

                    <div class="m-t-lg">
                        <h4 class="m-t-md">Demo how to use with api services</h4>
                    </div>

                    <div class="row">
                        <div class="col-sm-3">
                            <button class="ladda-button ladda-button-demo btn btn-primary" data-style="zoom-in">Submit</button>
                        </div>
                        <div class="col-sm-9">
<pre>
&lt;button class="ladda-button ladda-button-demo btn btn-primary"  data-style="zoom-in"&gt;Submit&lt;/button&gt;
</pre>
<pre>
var l = $( '.ladda-button-demo' ).ladda();
      l.click(function()
          // Start loading
          l.ladda( 'start' );
          // Do something in backend and then stop ladda
          // setTimeout() is only for demo purpose
          setTimeout(function()
              l.ladda('stop');
          },2000)
      });
</pre>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>



@section Styles {
    @Styles.Render("~/plugins/laddaStyles")
}

@section Scripts {
    @Scripts.Render("~/plugins/ladda")

    <script type="text/javascript">
        $(document).ready(function () {

            // Bind normal buttons
            Ladda.bind('.ladda-button', { timeout: 2000 });

            // Bind progress buttons and simulate loading progress
            Ladda.bind('.progress-demo .ladda-button', {
                callback: function (instance) {
                    var progress = 0;
                    var interval = setInterval(function () {
                        progress = Math.min(progress + Math.random() * 0.1, 1);
                        instance.setProgress(progress);

                        if (progress === 1) {
                            instance.stop();
                            clearInterval(interval);
                        }
                    }, 200);
                }
            });


            var l = $('.ladda-button-demo').ladda();

            l.click(function () {
                // Start loading
                l.ladda('start');

                // Timeout example
                // Do something in backend and then stop ladda
                setTimeout(function () {
                    l.ladda('stop');
                }, 12000)


            });

        });
    </script>
}